<script setup>
import {ref, onMounted, reactive, onUpdated, computed, defineProps} from "vue";
import {useRouter, useRoute} from "vue-router";
import userl from "../zhu/user.vue";
// 一个计算属性 ref
import {useCounterStore} from "../../pina/index";
const store = useCounterStore();
const user = computed(() => {
  return store.user;
});

const prop = defineProps(["containerRef"]);
console.log(prop.bac);
const router = useRouter();

const handleSelect = (e) => {
  router.push({
    name: `home`,
  });
};
const zhuye = () => {
  router.push({
    name: "zhu",
  });
};
const denglu = () => {
  activeIndex2.value = 88;
  router.push({
    name: "login",
  });
};
const btt = ref(false);
const scroll = (e) => {
  console.log(e);
  if (e.scrollTop > 200) {
    btt.value = true;
  } else {
    btt.value = false;
  }
};
const activeIndex2 = ref("1");

const handleClick = (e) => {
  e.preventDefault();
};
</script>

<template>
  <div class="main">
    <el-affix @scroll="scroll" :offset="0">
      <header class="header" :class="{bsc: btt}">
        <!-- <logo   /> -->

        <div class="bannder">
          <!--     -->
          <el-anchor
            @click="handleClick"
            direction="horizontal"
            type="default"
            :offset="70"
          >
            <el-anchor-link @click="handleSelect" href="#part1" title="part1">
              <template #default>
                <span class="sfd" style="font-size: 16px"> 首页</span></template
              >
            </el-anchor-link>

            <el-anchor-link href="#part2" title="part2">
              <template #default>
                <span class="sfd" style="font-size: 16px">
                  功能介绍</span
                ></template
              >
            </el-anchor-link>

            <el-anchor-link href="#part3" title="part3">
              <template #default>
                <span class="sfd" style="font-size: 16px">
                  关于我们</span
                ></template
              >
            </el-anchor-link>
            <el-anchor-link href="#part4" title="part3">
              <template #default>
                <span class="sfd" style="font-size: 16px">
                  热门套餐</span
                ></template
              >
            </el-anchor-link>
          </el-anchor>
          <!-- <el-menu
              default-active="home"
              class="el-menu-demo"
              mode="horizontal"
              background-color=""
              active-text-color="rgb(78 168 185)"
              @select="handleSelect"
            >
              <el-menu-item :style="{color: prop.bac}" index="home">
              </el-menu-item>
              <el-menu-item :style="{color: prop.bac}" index="2">
              </el-menu-item>
              <el-menu-item :style="{color: prop.bac}" index="3">
              </el-menu-item>
              <el-menu-item :style="{color: prop.bac}" index="4">
                <el-anchor-link href="#part4" title="part4">
                  <template #default>
                    <span style="font-size: 16px"> 热门套餐</span></template
                  >
                </el-anchor-link>
              </el-menu-item>
            </el-menu> -->
        </div>
        <div
          v-if="user"
          @click="zhuye"
          style="
            font-size: 16px;
            line-height: 30px;

            color: #fff;
            border-radius: 10px;
            cursor: pointer;
            width: 100px;

            text-align: center;
            height: 30px;
            margin-top: 10px;
          "
        >
          进入系统
        </div>
        <div
          v-if="!user"
          @click="denglu"
          style="
            background-color: rgb(78, 168, 185);
            font-size: 16px;
            line-height: 30px;

            color: #fff;
            border-radius: 10px;
            cursor: pointer;
            width: 60px;

            text-align: center;
            height: 30px;
            margin-top: 10px;
          "
        >
          登录
        </div>

        <div style="margin-top: -10px" v-else>
          <userl />
        </div>
      </header>
    </el-affix>
  </div>
</template>

<style lang="scss" scoped>
.header {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.2);
  /* position: absolute;  */
  width: 100%;

  display: flex;
  justify-content: flex-end;
  /* flex-direction: row-reverse; */
  padding: 0px 30px;
  /* background-color: rgb(0, 0, 0,.2); */
}
.lianright {
  width: 60%;
  height: 400px;
  background-color: red;
}
.lianxiang {
  margin-top: 30px;
}
.lianxiang li {
  font-size: 18px;
  line-height: 50px;
  color: rgb(102, 102, 102);
}
.fandh {
  font-size: 24px;
  font-weight: 700;
  color: rgb(127, 127, 127);
}
.sdsda {
  font-size: 16px !important;
}
.lianty {
  text-align: center;
  font: 15px/140% Arial, "宋体", Helvetica, sans-serif, Verdana;
  color: #5a5a5a;
}
.boleft {
  width: 40%;
  height: 400px;
  padding: 20px;
}
.lianxi {
  display: flex;

  width: 1200px;
  margin: auto;
  margin-top: 20px;
  border: 1px solid rgb(243, 243, 243);

  background-color: rgb(251, 251, 251);
}
.bm-view {
  width: 100%;

  height: 100%;
}
:deep(.el-tabs__item) {
  font-size: 16px;
}
:deep(.el-tabs__nav-wrap::after) {
  height: 0;
}
:deep(.el-tabs__item.is-active) {
  color: rgb(78 168 185);
}
:deep(.el-tabs__active-bar) {
  background-color: rgb(78 168 185) !important;
}
:deep(.el-tabs__item:hover) {
  color: rgb(78 168 185);
}

.xiangc {
  background-color: rgb(251, 251, 251);
  display: flex;
  margin-top: 30px;
  justify-content: space-between;
}
.xiangc li {
  cursor: pointer;
  width: 20%;
  height: 200px;
}
.xiangc li img {
  width: 100%;
  height: 80%;
  transition: all 0.2s linear;
}
:deep(.el-tabs__item) {
  font-size: 16px;
}
:deep(.el-tabs__nav-wrap::after) {
  height: 0;
}
:deep(.el-tabs__item.is-active) {
  color: rgb(78 168 185);
}
:deep(.el-tabs__active-bar) {
  background-color: rgb(78 168 185) !important;
}
:deep(.el-tabs__item:hover) {
  color: rgb(78 168 185);
}
/* .xiangc li:hover{
  img{
    transition: all .2s linear;
   transform: scale(1.1);
  }
} */

.xiangc li p {
  text-align: center;
  font-size: 16px;
}

.clace {
  padding: 30px;
  width: 1200px;
  margin: auto;
  /* width: 200px;
height: 200px; */
  /* background-color: red; */
}
.serch {
  display: flex;
  align-items: center;
  width: 180px;
}
.header {
  position: absolute;
  /* background-color:rgba(255,255,255,.5); */
  /* position: absolute;  */
  width: 100%;
  z-index: 999;
  display: flex;
  justify-content: flex-end;
  /* flex-direction: row-reverse; */
  padding: 0px 30px;
  /* background-color: rgb(0, 0, 0,.2); */
}
:deep(.el-sub-menu__title) {
  font-size: 16px;
  color: #fff !important;
}
.bannder {
  margin-left: 50px;

  width: 50%;
}
:deep(.el-menu) {
  background: rgba(0, 0, 0, 0);
}

:deep(.el-menu-item) {
  font-size: 16px;
  color: #fff;
}
:deep(.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover) {
  color: rgb(78 168 185) !important;
  background-color: rgba(0, 0, 0, 0.5);
}
:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):focus) {
  background-color: rgba(0, 0, 0, 0) !important;
}
:deep(
    .el-menu--horizontal .el-menu .el-menu-item,
    .el-menu--horizontal .el-menu .el-sub-menu__title
  ) {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
:deep(.el-menu-item:hover) {
  color: rgb(78 168 185) !important;
  background-color: rgba(0, 0, 0, 0) !important;
}
:deep(.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title) {
  color: rgb(78 168 185) !important;
}
.el-menu--horizontal.el-menu {
  border-bottom: 0;
}

.bsc {
  background-color: #f5f5f5;
  box-shadow: 10px 1px 10px rgb(218, 218, 218);
  :deep(.el-menu-item) {
    font-size: 16px;
    color: #220000;
  }
  :deep(.el-anchor__link) {
    color: #000;
  }
}

.el-anchor {
  padding-top: 10px;
  height: 50px;
  background-color: transparent;
}
:deep(.el-anchor__link.is-active) {
  color: rgb(78, 168, 185);
  font-weight: 700;
}

:deep(.el-anchor__marker) {
  background-color: rgb(78, 168, 185);
}

:deep(.el-anchor__link) {
  color: #fff;
}
</style>
